.w {
    position: relative;
}

/* 左上角的profile */
.profile-lf_angle {
    display: inline-block;
    margin: 50px 0 0;
    position: relative;
}

/* proflie中o用摩天轮照片，寓意着Eason的《幸福摩天轮》--杨总 */
.motianlun {
    position: absolute;
    top: 0;
    left: 80px;
    transform: translateY(-20%);
}

/* 设置p里面的文字样式 */
p {
    color: #fff;
    font-size: 22px;
    line-height: 31px;
    letter-spacing: 0.04em;
}

/* 前三个部分使用flex布局 */
.banner-flex {
    display: flex;
    flex-flow: column wrap;
    margin: 0 auto;
}

/* 每个部分下面的外边距 */
.banner1,
.banner2,
.banner3 {
    width: 1198px;
    margin: 80px auto 80px;
}

/* 第一部分简介 */
.banner1-img {
    width: 590px;
    height: 590px;
    display: inline-block;
    position: absolute;
    top: -33.5px;
    left: 0;
}

/* 第一部分的透明背景层，相对定位，等下图片和文字可以摆放 */
.banner1-text {
    width: 1169px;
    height: 523px;
    background-color: rgba(255, 255, 255, .2);
    position: relative;
    margin: 0;
}

/* 第一部分文字内容设置绝对定位 */
.banner1-text_c {
    width: 510px;
    position: absolute;
    right: 5%;
    top: 5%;
}

/* 第二个简介 */
/* 设置弹性布局，水平方向不换行 */
.banner2 {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

/* 摩天轮的外盒子设置宽高 */
.banner2-motianlun {
    width: 597px;
    height: 746px;
    position: relative;
    top: 150px;
}


.banner2-motianlun svg {
    transform: scale(3);
}

#picture_2 {
    animation: zhuan 8s linear infinite normal paused;
    transform-origin: center center;
    width: 450px;
    height: 450px;
}

/* 摩天轮转动的动画 */
@keyframes zhuan {
    from {
        transform: rotate(0deg);
    }

    25% {
        transform: translate(-2px, 2px) rotate(90deg);
    }

    50% {
        transform: translate(2px, 2px) rotate(180deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 右边的文字介绍和图片 宽度 */
.banner2-textimg {
    width: 474px;
}

/* 文字盒子透明背景，设置相对定位 */
.banner2-textimg_text {
    width: 474px;
    height: 316px;
    background-color: rgba(255, 255, 255, .2);
    position: relative;
}

/* p盒子设置绝对定位,水平垂直居中*/
.banner2-textimg_text_c {
    width: 402px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* 图片的宽高和外边距 */
.banner2-textimg_i {
    width: 410px;
    height: 410px;
    margin: 50px 32px 0;
}

/* 第三部分简介 */
/* 设置相对定位 */
.banner3 {
    background-color: rgba(255, 255, 255, .2);
    height: 825px;
    position: relative;
}

/* 第三部分文字盒子绝对定位 */
.banner3-text_c {
    width: 471px;
    position: absolute;
    top: 50%;
    left: 68px;
    transform: translateY(-50%);
}

/* 第三部分照片设置为背景图 照片的盒子绝对定位放在banner3盒子的右边 */
.banner3-backimg {
    width: 590px;
    height: 825px;
    background-image: url(../Image/profile/image/image\ 3.png);
    position: absolute;
    right: 0;
    top: 0;
}

/* 背景图上的文字介绍外盒子，相对定位，透明背景 */
.banner3-backimg_text {
    background-color: rgba(255, 255, 255, .6);
    width: 471px;
    height: 289px;
    margin: 520px auto 0;
    position: relative;
}

/* p的绝对定位和居中 */
.banner3-textimg_text_c {
    color: #000;
    width: 422px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 第四部分外边距 */
.main {
    margin: 50px 0 50px;
}

/* 第四部分照片 */
.main-img {
    width: 548px;
    height: 548px;
    margin-bottom: 50px;
}

/* 第四部分文字盒子 */
.main-text {
    width: 995px;
    height: 332px;
    background-color: rgba(255, 255, 255, .2);
    position: relative;
}

/* 第四部分p的居中 */
.main-text_c {
    width: 971px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* 小荷才露尖尖角的幸福摩天轮--svg */
.half-svg {
    width: 824px;
    height: 1028px;
    position: absolute;
    top: 2700px;
    right: 0;
}

.half-svg svg {
    transform: scale(2);
}

#picture_3 {
    animation: zhuan 8s linear infinite normal paused;
    transform-origin: center center;
}